<template>
    <div>
      <nav-bar :isLoggedIn="isLoggedIn" :userName="userName" @updateUserStatus="updateUserStatus"></nav-bar>
      <router-view @updateUserStatus="updateUserStatus"></router-view>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import NavBar from './title.vue';
  import { useRoute } from 'vue-router';
  
  // 定义用户登录状态和用户名
  const isLoggedIn = ref(false);
  const userName = ref(null);
  
  // 用于更新用户状态的方法
  const updateUserStatus = (newIsLoggedIn, newUserName) => {
    isLoggedIn.value = newIsLoggedIn;
    userName.value = newUserName;
  };
  
  const route = useRoute();
  
  // 监听路由变化，在从用户页面返回首页时更新状态
  const handleRouteChange = () => {
    if (route.path === '/') {
      const prevRoute = route.meta.prevRoute;
      if (prevRoute === '/MyUser' && route.params.userName) {
        updateUserStatus(true, route.params.userName);
      }
    }
  };
  
  route.meta.prevRoute = route.path;
  route.afterEach((to, from) => {
    to.meta.prevRoute = from.path;
    handleRouteChange();
  });
  </script>
  
  <style scoped>
  /* 可以在这里添加父组件的样式 */
  </style>